.<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","blue")
				})
				$("#btn2").click(function(){
					$("div:last").css("background-color","blue")
				})
				$("#btn3").click(function(){
					$("div:not(.one)").css("background-color","brown")
				})
				$("#btn4").click(function(){
					$("div:even").css("background-color","blueviolet")
				})
				$("#btn5").click(function(){
					$("div:odd").css("background-color","chartreuse")
				})
				$("#btn6").click(function(){
					$("div:eq(3)").css("background-color","coral")
				})
				$("#btn7").click(function(){
					$("div:gt(3)").css("background-color","coral")
				})
				$("#btn8").click(function(){
					$("div:lt(3)").css("background-color","coral")
				})
				$("#btn9").click(function(){
					$(":header").css("background-color","coral")
				})
				$("#btn10").click(function(){
					$("div:contains(id)").css("background-color","coral")
				})
				$("#btn11").click(function(){
					$("div:empty").css("background-color","coral")
				})
				$("#btn12").click(function(){
					$("div:has(.small)").css("background-color","coral")
				})
				$("#btn13").click(function(){
					$("div:parent").css("background-color","coral")
				})
			})
		</script>
	</head>
	<body>
		 <h3>基本选择器</h3>
		<input type="button" value="选择 第一个div." id="btn1"/>
		<input type="button" value="选择 最后一个div." id="btn2"/>
		<input type="button" value="选择 非class之外的div." id="btn3"/>
		<input type="button" value="选择 偶数div." id="btn4"/>
		<input type="button" value="选择 奇数div." id="btn5"/>
		<input type="button" value="选择 指定索引div." id="btn6"/>
		<input type="button" value="选择 指定索引大于4的div." id="btn7"/>
		<input type="button" value="选择 指定索引小于4的div." id="btn8"/>
		<input type="button" value="选择 所有标题标签." id="btn9"/>
		<input type="button" value="选择 带有文本的标签." id="btn10"/>
		<input type="button" value="选择 不包含子元素(文本元素)的空元素." id="btn11"/>
		<input type="button" value="选择 选取含有指定元素的div." id="btn12"/>
		<input type="button" value="选择 含有子元素(文本元素)的元素." id="btn13"/>
		<br /><br />
		 <!-- DIV元素 -->
		 
		<div class="one" id="one" >
		  id为one<br />class为one的div
		    <div class="small">class为small</div>
		</div>
		<div class="one"  id="two" title="test" >
					 id为two,class为one<br>title为test的div.
		    <div class="small"  title="other">class为small,title为other</div>
		    <div class="small"  title="test">class为small,title为test</div>
		</div>
		<div class="one">
		    <div class="small">class为small</div>
		    <div class="small">class为small</div>
					  <div class="small">class为small</div>
					  <div class="small"></div>
		</div>
		<div class="one">
		    <div class="small">class为small</div>
		    <div class="small">class为small</div>
					  <div class="small">class为small</div>
					  <div class="small"  title="tesst">class为small,title为tesst</div>
		</div>
		<div  class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
		包含input的type为"hidden"的div<input type="hidden" size="8" />
		</div>
		<span id="mover">正在执行动画的<br />span元素.</span>
	</body>
</html>
